<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直播</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    请输入商户ID：<input type="text" v-model="uid"><br>
    <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.0.0.min.js" charset="utf-8"></script>
    <div id="content" style="width: 500px; height: 300px">

    </div>
    <input type="button" value="开启麦克风" @click="startMic">
    <input type="button" value="开启摄像头" @click="startCamera2">
    <input type="button" value="开启屏幕" @click="startScreen">
    <input type="button" value="开始直播" @click="start">
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            livePusher:null,
            cameraStreamId:null,
            screenStreamId:null,
            videoEffectManager:null,
            uid : 'user1',
            urlMap:null
        },
        methods:{
            async start(){
                var that = this;

                this.livePusher.setRenderView('content');
                // 设置音频质量
                this.livePusher.setAudioQuality('standard');

                this.videoEffectManager.setLayout([{
                    streamId: that.screenStreamId,
                    x: 640,
                    y: 360,
                    width: 1280,
                    height: 720,
                    zOrder: 0
                }, {
                    streamId: that.cameraStreamId,
                    x: 1120,
                    y: 90,
                    width: 320,
                    height: 180,
                    zOrder: 2
                }]);

                await axios.get("/initLive/"+this.uid).then((res)=>{
                    this.urlMap = res.data;
                })


                that.livePusher.startPush(this.urlMap.pushUrl);



            },
            startMic(){

            },
            startCamera2(){
                this.livePusher.startCamera().then((streamId) => {
                    this.cameraStreamId = streamId;
                    console.log('摄像头分享成功');
                }).catch((error) => {
                    console.log('打开摄像头失败：'+ error.toString());
                });
            },
            startScreen(){
                this.livePusher.startScreenCapture().then((streamId) => {
                    this.screenStreamId = streamId;
                    console.log('屏幕分享成功');
                }).catch((error) => {
                    console.log('屏幕分享失败：'+ error.toString());
                });
            }
        },
        created(){
            this.livePusher = new TXLivePusher();
            this.videoEffectManager = this.livePusher.getVideoEffectManager();
            this.videoEffectManager.enableMixing(true);
            this.videoEffectManager.setMixingConfig({
                videoWidth: 1280,
                videoHeight: 720,
                videoFramerate: 15
            });
        }
    })
</script>

</body>
</html>